import {
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  DesktopOutlined
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React, { useContext} from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import LeftStyle from './left.module.css'

import AdminInfoContext from '../../context/adminInfoContext';
import axios from 'axios';
const { Sider } = Layout;

// let obj = {
//   a: 1
// }
// // var a = obj.a

// var {a} = obj

// axios.get('/').then(({data} )=>{
//   console.log(data.data);
// })


export default function HomeLeft (props)  {
  const history = useHistory()
  const location = useLocation()
  const {AdminInfo} = useContext(AdminInfoContext)
  const changePath = ({key})=>{
    location.pathname !== key && history.push(key)
  }
  return (
      <Sider trigger={null} collapsible collapsed={props.collapsed} style={{minHeight: '100vh'}}>
        <div className={`align-center ${LeftStyle.avatar}`} onClick={()=>{history.push('/setting')}}>
          <img src={AdminInfo.avatar} width={props.collapsed ? 45 : 80} alt=''/>
          {!props.collapsed && <p>{AdminInfo.username}</p>}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['/index']}
          items={[
            {
              label: '首页',
              path: '/index',
              key: '/index',
              icon: <DesktopOutlined/>
            },
            {
              label: '用户管理',
              path: '/user',
              key: '/user',
              icon: <UserOutlined></UserOutlined>
            },
            {
              label: '商品管理',
              key: '/goods',
              children: [
                {
                  label: '商品列表',
                  path: '/goods',
                  key: '/goods',
                  icon: <UserOutlined></UserOutlined>
                },
                {
                  label: '商品添加',
                  path: '/goodsAdd',
                  key: '/goodsAdd',
                  icon: <UserOutlined></UserOutlined>
                }
              ],
              icon: <UploadOutlined></UploadOutlined>
            },
            {
              label: '订单管理',
              path: '/order',
              key: '/order',
              icon: <VideoCameraOutlined></VideoCameraOutlined>
            }
          ]}
          onClick={changePath}
        >
        </Menu>
      </Sider>
  );
};